<template>
    <div class="s-header">
        <div class="s-header-title">全球{{ disease }}输入风险分布</div>
        <div class="s-header-subtitle">
            集成全球{{ disease }}月度确诊病例、死亡病例的病例数据，航班数据，利用大模型技术，打造风险评估算法，实现全球各国家在某一时间范围内对某一国家的输入风险情况。
        </div>
    </div>
</template>

<script>
export default {
    name: 'TopHeader',
    components: {},
    props: ['disease'],
}
</script>

<style lang="scss" scoped>
.s-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 16px;

    &-title {
        /* 全球猴痘输入风险分布 */

        // width: 400px;
        height: 40px;

        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 600;
        font-size: 40px;
        line-height: 40px;
        /* identical to box height, or 100% */
        display: flex;
        align-items: center;

        background: linear-gradient(294.11deg, #1f264d -32.9%, #4759b3 98.73%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
    }

    &-subtitle {
        padding: 2px 10px;
        border-left: 1px solid #d9d9d9;
        /* 集成全球猴痘月度确诊病例、死亡病例的病例数据，航班数据，利用大模型技术，打造风险评估算法，实现全球各国家在某一时间范围内对某一国家的输入风险情况。 */

        flex: 1;
        height: 100%;

        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #596080;
    }
}
</style>
